<template>
  <div>
      <!-- 面包屑导航区 -->
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
               <el-row >
                <el-col >
                     <el-button type="primary" @click="addCate">添加分类</el-button>
                </el-col>
               </el-row>
              <!-- 表格区域 -->
                <tree-table class="cssTree" :data ='categoriesList' :columns ="columns"
                :selection-type ='false'
                :expand-type ='false'
                show-index
                boder
                :show-row-hover ='false'>
                <!-- 是否有效 -->
                    <template slot="isok" slot-scope="{row}">
                     <i class="el-icon-success" style="color:lightgreen" v-if="row.cat_deleted === false"></i>
                     <i class="el-icon-error" style="color:red"  v-else></i>
                    </template>
                    <!-- 排序 -->
                     <template slot="order" slot-scope="{row}">
                        <el-tag v-if="row.cat_level === 0" >一级</el-tag>
                        <el-tag type="success" v-else>二级</el-tag>
                    </template>
                    <!-- 操作 -->
                    <template slot="caozuo">
                        <el-button type="primary" size="small">
                            <i class="el-icon-edit"></i>
                            编辑</el-button>
                        <el-button type="danger" size="small">
                            <i class="el-icon-delete"></i>
                            删除</el-button>
                    </template>
                </tree-table>
          <!-- 分页区域 -->
         <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paramsInfo.pagenum"
                :page-sizes="[1, 3, 5, 10]"
                :page-size="paramsInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
         </el-pagination>
        </el-card>
         <!-- 添加分类的弹框 -->
              <el-dialog
                title="添加分类"
                :visible.sync="cateDialog"
                width="40%">
                
                 <el-form :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px" >
                    <el-form-item label="分类名称 :" prop="cat_name">
                        <el-input v-model="addCateForm.cat_name"></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类 :">

                         <el-cascader
                         clearable
                          v-model="selectKeys"
                          :options="parentCateList"
                         :props="cascaderProps"
                          @change="handleChange">
                      </el-cascader>
                       
                    </el-form-item>
                 </el-form>
                

                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelCateDialog">取 消</el-button>
                    <el-button type="primary" @click="addCates">确 定</el-button>
                </span>
             </el-dialog>
             <!-- 父级分类的级联选择 -->

  </div>
  
</template>

<script>
export default {
  name:'cateIndex',
  components: {},
  props: {},
  data() {
    return {
        paramsInfo :{
            type:3,
            pagenum:1,
           pagesize:10 
        },
        total:0,
        columns:[{
          label:'分类名称',
          prop:'cat_name'
        },{
            label:'是否有效',
            type:'template',
            template:'isok'
        },
        {
            label:'排序',
            type:'template',
            template:'order'
        },
        {
            label:'操作',
            type:'template',
            template:'caozuo'
        }
        ],
        //商品分类数据列表
       categoriesList:[],
       cateDialog:false,
       addCateForm:{
            cat_name:'',
            cat_pid:0,
            cat_level: 0
       },
         addCateRules: {
          cat_name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ],
       },
      //  父级分类的数据
       parentCateList:[],
      //  级联选择器的配置对象
       cascaderProps:
        {
            value:'cat_id',
            label:'cat_name',
            children:'children',
            expandTrigger: 'hover' ,
            checkStrictly: true 
         },
        selectKeys:[]
    }
  },
  created() {
         this.getCateGoriesList()
  },
  methods: {
    async getCateGoriesList(){
       const {data:res} =  await this.$http.get('/categories',{params:this.paramsInfo})
        this.categoriesList = res.data.result
        this.total = res.data.total
     },
     handleSizeChange(val){
        this.paramsInfo.pagesize = val
        this.getCateGoriesList()
     },
     handleCurrentChange(val){
      this.paramsInfo.pagenum = val
        this.getCateGoriesList()
     },
    //  添加分类
    addCate(){
         this.getParentCateList()
         this.cateDialog = true
    },
   async getParentCateList(){
       const {data:res} =await this.$http.get('/categories',{ params:{type:2}})
       console.log(res);
         if(res.meta.status !== 200) return this.$message.error('获取父级分类列表失败')
         this.parentCateList = res.data
    },
    handleChange(){
           if(this.selectKeys.length > 0){ //如果选择
          this.addCateForm.cat_pid =  this.selectKeys[this.selectKeys.length-1]
           this.addCateForm.cat_level = this.selectKeys.length
           return
          }else{
             this.addCateForm.cat_pid = ''
             this.addCateForm.cat_level = ''
          }
    },
    addCates(){
       this.$refs.addCateRef.validate( async isok => {
         if(!isok) return
         const {data:res} =await this.$http.post('/categories',this.addCateForm)
          if(res.meta.status !== 201){
            return this.$message.error('添加分类失败')
             }
             this.$message.success('添加分类成功')
              this.getCateGoriesList()
               this.cateDialog  = false
          
        })
        
      
    },
    cancelCateDialog(){
       this.$refs.addCateRef.resetFields()
       this.addCateForm.cat_pid = ''
       this.addCateForm.cat_level = ''
        this.selectKeys = []
        this.cateDialog  = false
    }
  }
};
</script>
<style scoped lang='less'>
.el-breadcrumb{
     margin-bottom: 15px;
}
 .cssTree {
    margin-top: 15px;
    margin-bottom: 15px;
 }
 .el-cascader-panel {height: 100px; }
 .el-cascader{
  width: 100%;
 }
</style>